<template>
  <div class="container">
    <FmTreeTable ref="fmTreeTable" url="/process/admin" tableName="dict" :columns="columns">
            <template #listClass="scope">
              <dict-tag :options="fmTreeTable.dict('tag_type')" :effect="scope.row.iseffect" :value="scope.row.listClass"/>
            </template>
      <template #opt="scope">
        <el-button
            v-show="scope.row.parentId==null"
            style="font-size: 15px;"
            type="primary"
            link
            icon="FolderAdd"
            @click="addchild(scope)"
        >
        </el-button>
        <el-button
            type="primary"
            link
            style="font-size: 15px;"
            icon="edit"
            @click="fmTreeTable.handleEdit(scope.$index, scope.row)"
        >
        </el-button>

      </template>
    </FmTreeTable>
  </div>
</template>
<script setup lang="ts">
import FmTreeTable from '@/components/common/Table/FmTreeTable.vue'
import {ref, reactive, nextTick, onMounted, getCurrentInstance, ComponentInternalInstance} from 'vue';
import {LoadDict} from "@/utils/dict";
import {saveorUpadateDate} from "@/api";
import {ElMessage, FormInstance} from "element-plus";
const columns = [
  {
    "label": "主键",//标签名称
    "index": "id",//数据库索引
    "rules": [
      {required: true, message: "请输入主键", trigger: "blur",},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
    "addable": false,
    "upd-disabled":true
  },
  {
    "label": "父主键",//标签名称
    "index": "parentId",//数据库索引
    "rules": [
    ],//值规则
    "visible": true,//默认可见,
    "dataType": "text",//值值类型默认字符类型
    "add-disabled":true,
    "upd-disabled":true
  },
  {
    "label": "字典码",//标签名称
    "index": "code",//数据库索引
    "rules": [
      {max: 255, message: '字典码长度最大为  255个字符', trigger: 'blur'},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "字典值",//标签名称
    "index": "dictKey",//数据库索引
    "rules": [
      {max: 100, message: '长度最大为  100个字符', trigger: 'blur'},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "字典名称",//标签名称
    "index": "dictValue",//数据库索引
    "rules": [
      {max: 255, message: '字典名称长度最大为  255个字符', trigger: 'blur'},
    ],//值规则
    "search": true,//是否是搜索表单
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "排序",//标签名称
    "index": "sort",//数据库索引
    "rules": [{required: true, message: "请输入序号", trigger: "blur",}],//值规则
    "dataType": "number",//值值类型默认字符类型
  },
  {
    "type": "dict",//普通行，字典行，自定义行
    "dictkey": "tag_type",
    "label": "tag样式",//标签名称
    "index": "listClass",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "type": "dict",//普通行，字典行，自定义行
    "dictkey": "dict_iseffect",
    "label": "是否深色",//标签名称
    "index": "iseffect",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "字典备注",//标签名称
    "index": "remark",//数据库索引
    "rules": [
      {max: 255, message: '字典备注长度最大为  255个字符', trigger: 'blur'},
    ],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "label": "是否封存",//标签名称
    "index": "isSealed",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  },
  {
    "type": "opt",//普通行，字典行，自定义行
    "label": "操作",//标签名称
    "index": "opt",//数据库索引
    "rules": [],//值规则
    "dataType": "text",//值值类型默认字符类型
  }


]
const { proxy } = getCurrentInstance() as ComponentInternalInstance
let fmTreeTable = ref()
let saveVisible = ref(false)
let addform = ref<FormInstance>();
let maps=reactive({})
const addchild = (scope:any) => {
  nextTick(()=>{
    fmTreeTable.value.updform({"parentId":scope.row.id});
    fmTreeTable.value.saveVisible=true
    proxy!.$forceUpdate()
  })

}
onMounted(()=>{
  let map=new Map();
  for (let i = 0; i <columns.length ; i++) {
   map.set(columns[i].index,columns[i]);
  }
  maps=reactive(map)

})

</script>
<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

</style>